<template>


    <div class="head">
        <div class="songlist">
            <van-search
                    shape="round"
                    background="#4fc08d"
                    placeholder="搜索歌曲，歌手，专辑"
            />
            <span>热门搜索</span>
            <div class="searchsong">
                <div>111111111</div>
                <div>111111111</div>
                <div>111111111</div>
                <div>111111111</div>
                <div>111111111</div>
                <div>111111111</div>
                <br><br><br><br><br>
                <br>
                <ul class="hahalist">
                   <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr> <li><img src="../assets/img/biao.png" alt=""><span> &nbsp;哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈  </span> <img src="../assets/img/cha.png" alt=""></li>
                    <hr>
                </ul>
            </div>

        </div>
    </div>
</template>
<script>


</script>
<style lang="less" scoped>
    searchsong {
        width: 100%;
        box-sizing: border-box;

    }

    .searchsong > div:nth-of-type(n) {
        box-sizing: border-box;

        width: 26%;
        height: 30px;
        /*text-align: center;*/
        margin: 10px;
        border-radius: 25px;
        text-align: center;
        line-height: 30px;
        float: left;
        border: #666 1px solid;
    }

    .hahalist>li{
        position: relative;
        padding-left: 35px;
    }
.hahalist img:nth-of-type(1){
    position: absolute;
    left: 3px;
    top: 0px;
}
    .hahalist img:nth-of-type(2){
        position: absolute;
        right: 5px;
        top: 0px;
    }

</style>